<template>
  <div class="right-content">
    <div class="route-nav">
      <span
        class="route"
        :key="item"
        v-for="(item, index) in BreadCrumbList"
        v-html="InnerHtml(item, index)"
        :class="GetClass(index)"
      ></span>
    </div>
    <div class="right-banner">
      <router-view></router-view>
    </div>
  </div>
</template>
<script lang="ts">
import { Vue, Component, Watch } from "vue-property-decorator";


@Component({
  name: "RightContent",
  components: {},
})
export default class extends Vue {
  BreadCrumbList: Array<string> = [];
  @Watch("$route", { immediate: true })
  getNavList(): void {
    this.BreadCrumbList = [];
    this.$route.matched.filter((item) => {
      if (item.name) {
        this.BreadCrumbList.push(item.name);
      }
    });

    if (this.$route.meta) {
      if (this.$route.meta.origin) {
        this.BreadCrumbList.splice(0, 1, this.$route.meta.origin);
      }else{
        this.BreadCrumbList.shift()
      }
    }
  }
  InnerHtml(item: string, index: number): string {
    if (index != this.BreadCrumbList.length - 1) {
      return item + "&nbsp / &nbsp";
    } else {
      return item + "";
    }
  }
  GetClass(index: number): string {
    if (index == this.BreadCrumbList.length - 1) {
      return "now-route";
    } else {
      return "";
    }
  }
}
</script>
<style scoped>
.right-content {
  margin-left: 15px;
  padding-bottom: 32px;
  display: inline-block;
  width: 1232px;
}
.route-nav {
  box-sizing: border-box;
  height: 51px;
  background-color: white;
  font-size: 19px;
  color: rgb(153, 153, 153);
  padding-left: 29px;
  display: flex;
  align-items: center;
  width: 100%;
  border-radius: 6.4px;
}
.now-route {
  cursor: pointer;
  color: #1989fa;
  font-weight: 700;
}
.right-banner {
  box-sizing: border-box;
  width: 100%;
  background-color: white;
  padding: 32px 30px;
  margin-top: 16px;
  border-radius: 6.4px;
}
</style>